<template>
    <div class="order-delete">
        <div class="deleteL" @click="changeDelete">
            <img v-show="deleteShow" src="../../../../static/images/success-green.png">
            <img v-show="!deleteShow" src="../../../../static/images/circle-white.png">
            <public-item :title="title" :unit="unit" :weight="weight" :number="number" />
        </div>
        <div class="right-line">
            <div class="line"></div>
            <div class="delete" @click="deleteSure">
                <img src="../../../../static/images/delete-ash.png">
            </div>
        </div>
    </div>
</template>

<script>
    import PublicItem from './public.vue';

    export default {
        props:['index', 'title', 'unit', 'weight', 'number', 'selectState'],
        components:{
            PublicItem
        },
        data() {
            return{
                deleteShow: false
            }
        },
        mounted() {
            if(this.$store.state.shop.operateMode != 'stock') {
                for(let x of this.$store.state.shop.selectItems) {
                    if(this.index == x) {
                        this.deleteShow = true;
                        break;
                    }
                }
            }
        },
        methods:{
            changeDelete() {
                this.deleteShow = !this.deleteShow;

                if(this.$store.state.shop.operateMode == 'stock') {

                    if(this.deleteShow) {
                        this.$emit('onSelectState', {
                            mode: 'select', index: this.index
                        });
                    } else {
                        this.$emit('onSelectState', {
                            mode: 'unSelect', index: this.index
                        });
                    }
                } else {

                    if(this.deleteShow) {
                        this.$store.commit('shop/addSelectItem', this.index);
                    } else {
                        this.$store.commit('shop/deleteSelectItem', this.index);
                    }
                }
            },
            deleteSure() {
                if(this.$store.state.shop.operateMode == 'stock') {
                    this.$emit('onDelete', this.index);
                } else if (this.$store.state.shop.selectMode == 'scan') {
                    let url = '/api/home/user/delStock',
                        params = {
                            id: this.$store.state.shop.carts[this.index].stockItemId,
                            token: this.$store.state.options.user.token
                        };

                    this.$util.postRequestInterface(url, params, (res) => {
                        this.$store.commit('shop/deleteShopCartsItem', this.index);
                    });
                } else {
                    this.$store.commit('shop/deleteShopCartsItem', this.index);
                }
            }
        },
        watch: {
            '$store.state.shop.status.allSelect'(nVal, oVal) {
                this.deleteShow = nVal;
            },
            '$store.state.shop.stock.allSelect'(nVal, oVal) {
                this.deleteShow = nVal;

                if(nVal) {
                    this.$emit('onSelectState', {
                        mode: 'select', index: this.index
                    });
                } else {
                    this.$emit('onSelectState', {
                        mode: 'unSelect', index: this.index
                    });
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .order-delete{
        display: flex;
        justify-content:space-between;

        .deleteL{
            display: flex;
            align-items: center;
            img{
                width: 1.5rem;
                height: 1.5rem;
                margin-right: 1rem;
            }
        }
        .right-line{
            display: flex;
            .line{
                width:.08rem;
                margin: 0.8rem 0;
                background:rgba(238,238,238,1);
                margin-right: 2rem;
            }
            .delete{
                display: flex;
                justify-content: center;
                align-items: center;
                color:#FF0101;
                img{
                    width: 1.6rem;
                    height: 1.6rem;
                    padding-right: 2rem;
                }
            }
        }
    }
</style>
